FLASH Part 2
Importing
Movies into Flash
Step
1: Download and save a movie onto the desktop. A movie clip is available on
blackboard for your convenience (saved as: Devil).
Step
2: Open a new Flash Document.
Step
3: Go to "file" / "import" / "import video".
Step
4: A window will pop up. Select the radio button "On your computer"
and "Choose".
Step
5: Select movie file from the desktop and click next
Step
6: Select the radio button "Embed video in SWF and play in timeline"
Step
7: Pull down "Audio Track" and select "Separate". This will
separate the audio from the video in the library. Click next.
Step
8: You may want to edit your video clip:
go ahead. Then, adjust the
quality to your preference. Click next and then finish.
Step
9: Drag the video file onto the stage.
Step
10: Create a new layer. On layer two drag the audio file onto the stage.
Step
11: To correctly play the audio and video together on the stage click on "frame1" of either the audio
or video layer. Go to the "properties" panel below the stage. For
"Sync" select "stream".
Step
11: Test movie.
Rotoscoping
Rotoscoping
is the process of turning a video or movie into a cartoon or animation. ItÕs a
very simple (but tedious!) process.
GREAT EXAMPLE OF ROTOSCOPING
Step 1: Import a movie into flash. (See the practice file,
lego-bowling.mov)
(DonÕt worry about splitting the sound, youÕll be getting rid of the movie
later.) Select ÒEmbed video in SWF and play in timelineÓ.
Step 2: Place the movie on layer 1 (you can resize it with the
transform tool) and lock it.
Step 3: Choose the section of the movie that you want to animate by
moving the
red bar between frames. (Preferably a small section with not
a whole lot of detailÉ.youÕll see why later)
Step 4: Create a new layer. This will be the layer that you will be
drawing on.
Step 5: Insert a new keyframe (F6) on layer 2 where you want to start
animating and keep inserting keyframes in each frame until you reach the frame
that you want to stop animating. (i.e. if you want to animate the frames 20-50,
you need to insert a keyframe in 20, 21, 22, 23Éall the way up to 50)
Step 6: Make sure you are in the first frame
that you want to animate and select
the pencil tool. At the bottom of the toolbar, there is an
ÒoptionsÓ box, select the smooth setting.
Step 7: Trace over the image in the current
frame. After youÕve finished the first
frame move to the next and keep tracing each frame one at a
time until youÕve reached your last frame. (It may be easier to trace if you
zoom in)
Step 8: Now that you have all of your frames
done make sure you save your
work so you donÕt accidentally lose it the next few steps.
Step 9: Unlock layer 1 and delete it.
Step 10: Go back to layer 2 and remove all of
the frames that are empty. (You
can do this quickly by highlighting them all,
right-clicking, and selecting Ò delete
frames.Ó)
Step 11:
Control/Enter: Watch
your animation.
Buttons
VIEW: Visit http://www.interactivenarratives.org
and
select: All Info and Interactive Graphics
Review
some fascinating interactive graphics driven by simple buttons.
A
button is a Flash movie clip with different (4) frames that represent the
button in all its possible states.
The button symbol has three button-state frames: Up, Over, Down, plus one frame that
defines the active button area. To
create the most basic button symbol, choose a simple shape and use it for each
frame; change its color and add or modify internal elements for the various
states. When you complete all four
frames, your button is ready to use.
Return to document-editing mode, and drag an instance of the button
symbol from the Library panel to the Stage.
When
you see the Blue arrow, you know youÕre in button editing mode. You click on the blue arrow to get back
to the main timeline. Doubleclick
on the button symbol to get you into button editing mode.
Demonstrate
1.
Open up a New Flash Document.
2.
Draw a circle on the stage and convert it to a button
(Modify/Convert to symbol/Button):
Double
click on the button to enter button editing mode.
3. When the button is Up, itÕll appear as
it is in the main timeline. Add
more keyframes to the Over, Down and HIT frames (F6)
4.
On the Over frame, change the circle somehow. Here we have changed the color blue and added a yellow
insideÉwhen the user brings the mouse over the button, this is the image
theyÕll see.
5.
On the Down button, change the image once again.
6.
On the Hit button, leave it as it is.
Add
some Timeline Effects to your buttons.
Insert/TimeLineEffects/. On
the Over frame, try adding a Blur.
On
the Down frame, try adding a Drop Shadow
Adding
SFX
Go
to some free SFX sites and download some sounds to your desktop:
Animal
sounds: http://simplythebest.net/sounds/MP3/sound_effects_MP3/animals_mp3.html
Industrial
sounds: http://simplythebest.net/sounds/MP3/sound_effects_MP3/industrial_mp3.html
Cartoon
sounds: http://simplythebest.net/sounds/MP3/cartoon_mp3.html
Go
to File/Import and import a few sound effects to your library. Grab the sound icon of the sound you
want and drop it on the button frame (frames, if you have an effect placed on
the button).
Practice
in Class:
1.
Find a photo (online) to import that would be good for button animation: a painting with specific elements you
want to emphasize; a map that has certain features you want to note; a graphic
that has elements youÕd like to highlight. Put this image on your FIRST LAYER
of your Flash document, and lock the layer.
2.
Create a sequence of buttonsÉa MINIMUM of 5 buttons. Make the buttons original and INTERESTING. Make them relate to the image you have
chosen. Draw them with your
graphic tools.
4.
Work with the Over, Down and Hold keys, and animate your buttons.
5. Put a different sound on each button. (You can find the SFX in a folder
provided) That means that each button needs to be different. You canÕt just keep the same button and
add on different SFX.
You
are welcome to also search online for your own SFX.
Invisible
Buttons:
Sometimes you want to make a clickable area on
top of an image, but you do not want a button graphic. The way to do this is by
creating an "invisible" button.
Step 1: Have your image positioned on the Stage,
and create a new layer to hold the button. In this example, we will make a
button out of the woman walking in the photo shown below.
Step 2: Select the Brush tool and a bright
contrasting color. Then paint to cover the area you want to behave as a button,
or "hot" area.
Step 3: After covering the entire area with the
Paint color, click once to select it.
Step 4: Open the Modify menu and select Convert
to Symbol.
Step 5: Name your symbol, select Button, and
click OK.
Step 6: Double-click the button area (the shape
you painted on the Stage) to go into Symbol Editing Mode. You will see the
distinctive button Timeline (below). Click and hold the frame under the label
"Up."
Step 7: Drag the frame horizontally to the label
"Hit," and drop it there.
.
Step 8: Exit from Symbol Editing Mode (Ctrl-E/Win
or Cmd-E/Mac). Your button area will look like the pedestrian below -- a
transparent blue overlay indicates the area of the button while you are in the
FLA. When you save and export the SWF, you will not see the blue area in the
final file. But when you roll over the button area, the hand cursor will
appear.
Now that you have an invisible button, you can
script it to do whatever you like on (rollover) and on (release).